<template>  
    <view class="container">
		<Masks v-if="show_modal||show_rule"></Masks>
		<view  class="swiper-list">
			<swiper class="swiper" circular @change="swiperChange" :autoplay="true" :interval="2000"	:duration="500">
				<swiper-item v-for="(item,index) in benefit.pics" :key="index">
					<view >
						<image :src="item" class="swiper-image" ></image>
					</view>
				</swiper-item>
			
			</swiper>
			<view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>
		<view class="title">
			<view class="title-detail">{{benefit.title}}</view>
			<view style="padding:0rpx 30rpx;">
				<view class="tags" v-if="benefit.tags!=''">{{benefit.tags}}</view>
				<view style="float: right;color: #999999;">已报名{{benefit.roll_total}}人</view>
			</view>
			<view class="pad30" style="font-size: 30rpx;">{{benefit.description}}</view>
		</view>
		<view class="letter-max">
			<view class="disflex pad30">
				<view style="font-size: 34rpx" class="flex1 fontbold">公益介绍</view>
				<view @click="showModalRule()" style="align-items: center;color: #999999;" class="disflex"><image src="/static/temp/attention.png" style="width: 32rpx;height: 32rpx"></image><text style="margin-left: 10rpx;font-size: 24rpx;">规则</text></view>
			</view>
			<view class="pad2030">
				<view class="letter-left">立项时间</view>
				<view class="letter-right">{{benefit.approval_at}}</view>
			</view>
			<view class="pad2030">
				<view class="letter-left">发布机构</view>
				<view class="letter-right">{{benefit.campus_info.name}}</view>
			</view>
			<view class="pad2030">
				<view class="letter-left">公益地点</view>
				<view class="letter-right">{{benefit.address}}</view>
			</view>
			<view class="pad2030" v-if="benefit.partner">
				<view class="letter-left">合作机构</view>
				<view class="letter-right float-l">
					<view v-for="(item,index) in benefit.partner" :key="index" class="marbottom">{{item}}</view>
				</view>
			</view>
			<view class="pad2030" v-if="benefit.consult">
				<view class="letter-left">咨询电话</view>
				<view class="letter-right float-l">
					<view v-for="(item,index) in benefit.consult" :key="index" class="marbottom">{{item}}</view>
				</view>
			</view>
			<view class="fenge"></view>
			<rich-text :nodes="benefit.content" style="padding: 20rpx 30rpx"></rich-text>
		</view>
		<view class="bottom-btn">
			<view  class="btn" @click="toApply()" v-if="benefit.user_benefit==0">立即报名</view>
			<view  class="btn" v-else-if="benefit.user_benefit==1" @click="toApply()" style="background: rgba(108 ,177 ,94,0.2);color: #92C786;">报名申请中</view>
			<view  class="btn" v-else-if="benefit.user_benefit==2" style="background: rgba(108 ,177 ,94,0.2);color: #92C786;">已报名</view>
			<view  class="btn" v-else style="background: rgba(108 ,177 ,94,0.2);color: #92C786;">已报名</view>
			<!-- <view style="padding: 30rpx;font-size: 28rpx;">本期现场助力报名活动已结束</view> -->
		</view>
		<view v-if="show_modal" style="position: absolute;top: 50%;z-index: 2;border-radius: 16rpx;background: #FFFFFF;transform:translate(-50%,-50%);left: 50%;width: 700rpx;">
			<view style="text-align: right;margin-right: 20rpx; margin-top: 20rpx;"><text @click="closeModal()" class="cell-icon yticon icon-jia2" style="transform: rotate(45deg); display: inline-block;flex: 1;font-size: 44rpx"></text></view>
			<view style="text-align: center;font-weight: bold;">确认报名参加该公益项目？</view>
			<view style="margin: 40rpx;color: #808080;">报名后，工作人员会联系您参加公益志愿者</view>
			<view @click="makePhone()" style="margin: 40rpx;color: #808080;display: flex;align-items: center;justify-content: center;">
				<text class="cell-icon yticon icon-phone" style="width: 40rpx !important;height: 40rpx !important"></text>联系人:{{benefit.campus_info.linkman}}
			</view>
			<!-- <view style="margin: 40rpx;">
				<textarea v-model="remark" maxlength="500" placeholder="(必填)请简述报名参加该公益的什么志愿者工作，能提供什么(500字以内)" class="desc"></textarea>
			</view> -->
			<view style="display: flex;margin-top: 30rpx;border-top: 1px solid #cccccc;">
				<view class="modal-btn" @click="closeModal()">取消</view>
				<view class="modal-btn" style="border-right:none;color: #2678FF;" @click="createBenefit()">确认</view>
			</view>
		</view>
		<view v-if="show_rule" style="position: absolute;top: 50%;z-index: 2;border-radius: 16rpx;background: #FFFFFF;transform:translate(-50%,-50%);left: 50%;width: 700rpx;">
			<view style="text-align: right;margin-right: 20rpx; margin-top: 20rpx;"><text @click="closeModal()" class="cell-icon yticon icon-jia2" style="transform: rotate(45deg); display: inline-block;flex: 1;font-size: 44rpx"></text></view>
			<view style="padding:0rpx 30rpx;text-align: center;">兑换规则</view>
			<view style="padding: 20rpx;">
				<rich-text :nodes="benefit.rule" style="font-size: 24rpx;"></rich-text>
			</view>
		</view>
	</view>
</template>  
<script>  
	
	import Api from '@/common/api';
    import { mapState } from 'vuex';
	import Masks from '@/components/mask';
    export default {
		components: {
			Masks
		},
		data(){
			return {
				id:0,
				benefit:{},
				swiperCurrent: 0,
				swiperLength: 0,
				show_modal:false,
				show_rule:false,
				remark:'',
				timer:null
			}
		},
		onShow(){
			if(this.id>0&&!this.$api.isEmptyObject(this.benefit)){
				this.stopTimer();
				this.startTimer()
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.loadDetail()
		},
		 beforeDestroy(){
			this.stopTimer();
		 },
		 onHide(){
			this.stopTimer();
		 },
        methods: {
			startTimer() {
			 this.timer = setInterval(() => {
			    this.loadDetail(true)
			  }, 2000); // 每2秒更新一次
			},
			stopTimer() {
			  if (this.timer) {
			    clearInterval(this.timer);
			  }
			},
			//获取列表
			async loadDetail(showT=false) {
				let params = {
					id:this.id
				};
				let data = await Api.apiCall('get', Api.apiName.benefit_detail, params,showT);
				if (!data) { //出错时
					return;
				}
				this.benefit=data.data;
				this.swiperLength=data.data?data.data.pics.length:0;
				if(this.benefit.user_benefit==1){
					this.stopTimer();
					this.startTimer()
				}
				if(this.benefit.user_benefit==2){
					this.stopTimer()
				}
				
			},
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			toApply(){
				this.show_modal=true
			},
			closeModal(){
				this.show_modal=false;
				this.show_rule=false;
			},
			showModalRule(){
				this.show_rule=true;
			},
			closeRule(){
				this.show_rule=false;
			},
			makePhone(){
				uni.makePhoneCall({
					phoneNumber:this.benefit.campus_info.contact
				})
			},
			async createBenefit(){
				// if(this.remark.length==0){
				// 	this.$api.msg(`请填写备注`);
				// 	return;
				// }
				let that = this;
				let params = {
					benefit_id:this.id,
					// remark:this.remark
				};
				let data = await Api.apiCall('post', Api.apiName.create_benefit, params);
				if (!data) { //出错时
					return;
				}
				this.show_modal=false;
				this.show_rule=false;
				this.benefit.user_benefit=1;
				this.$api.msg(`申请成功，请联系负责人审核`,2500)
				this.startTimer()
				setTimeout(function(){
					that.makePhone()
				},2500)
			}
			
        }  
    }  
</script>  
<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	.container{
		height: 100%;
		overflow: hidden;
	}
	.title{
		margin: 30rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		position: relative;
		margin-top: -30rpx;
	}
	.title-detail{
		padding: 30rpx;
		font-weight: bold;
		font-size: 36rpx
	}
	.tags{
		background: #6CB15E;
		border-radius: 6rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		padding: 6rpx 14rpx;
		float: left;
	}
	.swiper-list{
		height: 546rpx;
		position: relative;
	}
	.swiper{
		height: 100%;
	}
	.swiper-image{
		height: 546rpx;
		width: 100%;
	}
	.swiper-dots{
		position: absolute;
		bottom: 60rpx;
		right: 60rpx;
		background: rgba(0,0,0,0.4);
		color:#FFFFFF;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}
	.bottom-btn{
		position: fixed;
		bottom: 0rpx;
		background: #FFFFFF;
		width: 100%;
		text-align: center;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.5);
	}
	.btn{
		padding: 20rpx;
		width: 90%;
		margin: 26rpx auto;
		border-radius: 30rpx;
		background: #6CB15E;
		color:#FFFFFF;
	}
	.disflex{
		display: flex;
	}
	.fontbold{
		font-weight: bold;
	}
	.pad30{
		padding: 30rpx;
	}
	.flex1{
		flex: 1;
	}
	.letter-max{
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 180rpx;
	}
	.pad2030{
		padding: 20rpx 30rpx;
	}
	.letter-left{
		font-size: 28rpx;
		font-weight: bold;
		flex: 1;
		width: 30%;
		float: left
	}
	.letter-right{
		font-size: 28rpx;
		font-weight: bold;
	}
	.float-l{
		float: left;
	}
	.fenge{
		margin: 30rpx;
		border: 0.5px dashed #999999;
	}
	.marbottom{
		margin-bottom: 10rpx;
	}
	.cpt-mask {
		top: 0rpx !important;
	}
	.modal-btn{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1px solid #cccccc;
		padding: 30rpx;
	}
	.desc{
		border: 1px solid rgba(18, 17, 42,0.1);
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 26rpx;
	}
</style>